<!-- 表盘商城 -->
<template>
  <div id="app">
    <div v-if="$route.name === 'login' || !$route.name">
      <router-view></router-view>
    </div>

    <div v-else>
      <Header :bg="getColor()" :myWidth="nav_width">
        <span @click="change_tab('lef')" v-if="show_nav === 'rig'" class="rig-t">
          <img src="./assets/image/nav/right.png"></span>
        <span @click="change_tab('rig')" v-if="show_nav === 'lef'" class="lef-t"><img src="./assets/image/nav/left.png" alt="" srcset=""></span>
      </Header>
      <div :style="`width: ${nav_width}px`" id="nav">
        <router-link :class="`my_icon ${nav_active === '/Home'?'homes':'home'}`" to="/Home">首页</router-link>
        <el-menu class="el-menu-vertical-demo" v-if="is_show_nav('functional_module_crs')">
          <el-submenu index="5" style="color: #6F849A">
            <template v-slot:title>
              <img src="./assets/image/nav/good.png" alt="" srcset="">
              客户管理
            </template>
            <el-menu-item-group>
              <router-link :class="`my_icon ${nav_active === '/CustomerManagement'?'jiantous':'jiantou'}`"
                           to="/CustomerManagement">客户列表</router-link>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>

        <el-menu class="el-menu-vertical-demo" v-if="is_show_nav('functional_module_user')">
          <el-submenu index="5" style="color: #6F849A">
            <template v-slot:title>
              <img src="./assets/image/nav/good.png" alt="" srcset="">
              用户权限管理
            </template>
            <el-menu-item-group>
              <router-link :class="`my_icon ${nav_active === '/RoleManagement'?'jiantous':'jiantou'}`"
                           to="/RoleManagement">职务管理</router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <router-link :class="`my_icon ${nav_active === '/UserManagement'?'jiantous':'jiantou'}`"
                           to="/UserManagement">员工管理</router-link>
            </el-menu-item-group>
            <!--            <el-menu-item-group>-->
            <!--              <router-link :class="`my_icon ${nav_active === '/MenuList'?'jiantous':'jiantou'}`"-->
            <!--                           to="/MenuList">菜单列表</router-link>-->
            <!--            </el-menu-item-group>-->
            <!--            <el-menu-item-group>-->
            <!--              <router-link :class="`my_icon ${nav_active === '/MenuPermission'?'jiantous':'jiantou'}`"-->
            <!--                           to="/MenuPermission">菜单列表（树状）</router-link>-->
            <!--            </el-menu-item-group>-->
          </el-submenu>
        </el-menu>

        <el-menu class="el-menu-vertical-demo" v-if="is_show_nav('functional_module_demand')">
          <el-submenu index="5" style="color: #6F849A">
            <template v-slot:title>
              <img src="./assets/image/nav/good.png" alt="" srcset="">
              需求管理
            </template>
            <el-menu-item-group>
              <router-link v-if="is_show_nav('/DemandSys') && this.$store.state.module1.UserInfo.userType !== '02'"
                           :class="`my_icon ${nav_active === '/DemandSys'?'jiantous':'jiantou'}`"
                           to="/DemandSys">需求列表</router-link>
              <router-link v-if="is_show_nav('/DemandCustomer') && this.$store.state.module1.UserInfo.userType ===
              '02'" :class="`my_icon ${nav_active === '/DemandCustomer'?'jiantous':'jiantou'}`"
                            to="/DemandCustomer">需求列表</router-link>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
        <el-menu class="el-menu-vertical-demo" v-if="is_show_nav('functional_module_material')">
          <el-submenu index="5" style="color: #6F849A">
            <template v-slot:title>
              <img src="./assets/image/nav/good.png" alt="" srcset="">
              物料管理
            </template>
            <el-menu-item-group>
              <router-link :class="`my_icon ${nav_active === '/BuiltInDial'?'jiantous':'jiantou'}`"
                           to="/BuiltInDial">内置表盘管理</router-link>
              <router-link  :class="`my_icon ${nav_active === '/BuiltInWallpaper'?'jiantous':'jiantou'}`"
                           to="/BuiltInWallpaper">内置壁纸管理</router-link>
              <router-link :class="`my_icon ${nav_active === '/MaterielBasicConfiguration'?'jiantous':'jiantou'}`"
                           to="/MaterielBasicConfiguration">基础配置</router-link>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
        <el-menu class="el-menu-vertical-demo" v-if="is_show_nav('functional_module_message')">
          <el-submenu index="5" style="color: #6F849A">
            <template v-slot:title>
              <img src="./assets/image/nav/good.png" alt="" srcset="">
              公司公告
            </template>
            <el-menu-item-group>
              <router-link v-if="is_show_nav('/NoticeColumn')" :class="`my_icon ${nav_active === '/NoticeColumn'?'jiantous':'jiantou'}`"
                            to="/NoticeColumn">栏目管理</router-link>
              <router-link v-if="is_show_nav('/NoticeMessage')"
                           :class="`my_icon ${nav_active === '/NoticeMessage'?'jiantous':'jiantou'}`"
              to="/NoticeMessage">消息管理</router-link>
              <router-link v-if="is_show_nav('/NoticeMessageCustomer') && this.$store.state.module1.UserInfo.userType ===
              '02'" :class="`my_icon ${nav_active ===
              '/NoticeMessageCustomer'?'jiantous':'jiantou'}`"
              to="/NoticeMessageCustomer">公告列表</router-link>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>

        <el-menu class="el-menu-vertical-demo" v-if="is_show_nav('functional_module_sys')">
          <el-submenu index="5" style="color: #6F849A">
            <template v-slot:title>
              <img src="./assets/image/nav/good.png" alt="" srcset="">
              系统管理
            </template>
            <el-menu-item-group>
              <router-link v-if="is_show_nav('/SysLoginLog')" :class="`my_icon ${nav_active === '/SysLoginLog'?'jiantous':'jiantou'}`"
                           to="/SysLoginLog">登录日志</router-link>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <div :style="`left: ${nav_width}px`" id="contents">

        <p class="in_path">
          |  {{ ' ' + path_name }}
        </p>

        <router-view />
      </div>
    </div>

  </div>
</template>

<script>

export default {
  data () {
    return {
      show_nav: 'lef',
      nav_width: 200,
      path_name: '首页',
      nav_active: ''
    }
  },

  watch: {
    $route (to, from) {
      this.pathNames()
      this.nav_active = to.path
      if (from.name === 'login') {
        // window.location.reload()
      }
    }
  },
  mounted () {
    this.pathNames()
    if (window.location.pathname !== '/web/cmsview/crm/Login' && window.location.pathname !== '/' &&
        window.location.pathname !== '/customer/web/Login') {
      // if (window.location.pathname !== '/') {
      this.$store.dispatch('get_munt')
    }
  },

  methods: {
    change_tab (nav_type) {
      this.show_nav = nav_type
      nav_type === 'rig' ? this.set_time('-', 190, 64, 1) : this.set_time('+', 190, 64, 1)
    },

    set_time (type, max, min, time) {
      var type = type; var max = max; var min = min
      setTimeout(() => {
        if (type === '+' && min <= max) {
          this.set_time(type, max, min + 10, time)
          this.nav_width = (min + 10) * 1
        } else if (type === '-' && max >= min) {
          this.set_time(type, max - 10, min, time)
          this.nav_width = (max - 10)
        }
      }, time)
    },

    is_show_nav (name) {
      let show = false
      this.$store.state.module1.menu_list.forEach(v => {
        if (v.path === name) {
          show = true
        }
      })
      return show
    },

    pathNames () {
      let name = '其它'
      // 获取当前路径
      const currentPath = window.location.pathname;
      // 判断当前路径是否为公司路径（/web/cmsview/crm）或者客户路径（/customer/web）
      const isCompanyPath = currentPath.includes('/web/cmsview/crm');
      // const isCustomerPath = currentPath.includes('/customer/web');

      // 提取路径后部分
      const path = currentPath.split(isCompanyPath ? '/web/cmsview/crm/' : '/customer/web/')[1];

      switch (path) {
        case 'Home': name = '首页'
          break
        case 'CustomerManagement': name = '客户管理/客户列表'
          break
        case 'RoleManagement': name = '用户权限管理/职务管理'
          break
        case 'UserManagement': name = '用户权限管理/员工管理'
          break
        case 'DemandSys': name = '需求管理/需求列表'
          break
        case 'DemandCustomer': name = '需求管理/需求列表'
          break
        case 'Customer/DemandCustomer': name = '需求管理/需求列表（客户）'
          break
        case 'BuiltInDial': name = '物料管理/内置表盘管理'
          break
        case 'BuiltInWallpaper': name = '物料管理/内置壁纸管理'
          break
        case 'MaterielBasicConfiguration': name = '物料管理/基础配置管理'
          break
        case 'NoticeMessage': name = '消息管理'
          break
        case 'NoticeColumn': name = '栏目管理'
          break
        case 'NoticeMessageCustomer': name = '公告列表'
          break
        default:
          break
      }
      this.path_name = name
    },

    getColor () {
      const bg = '#fff'
      return bg
    }
  }
}
</script>

<style lang="scss">
html, body {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
a {
  text-decoration:none;
}
#app {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#nav {
  position: fixed;
  top: 40px;
  bottom: 0;
  z-index: 999;
  overflow: hidden;
  overflow-y: scroll;
  background: #F1F4FA;
  border-top: 1px solid #E8ECEF;
}
#nav a {
  position: relative;
  display: block;
  width: 194px;
  line-height: 48px;
  height: 48px;
  text-decoration:none;
  padding: 0 60px;
  font-size: 14px;
  color: #6F849A;
}

#contents {
  position: absolute;
  height: 100%;
  right: 0;
  padding-top: 90px;
  padding-bottom: 0px;
  overflow: auto;
  background: #F8FAFB;
}

.router-link-active {
  background: #fff;
  color: #3F85F7 !important;
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 4px;
    height: 48px;
    background: #3F85F7;
  }
}

.bg_color {
  background: #393D49;
  color: #fff;
}
.bg_colors {
  background: #0f375f;
  color: #fff;
}
.my_icon {
  background-image: url(./assets/image/nav/home.png);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 20px 14px;
}

.jiantou {
  background-image: url(./assets/image/nav/jiantou.png);
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: 30px 18px;
}
.jiantous {
  background-image: url(./assets/image/nav/jiantous.png);
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: 30px 18px;
}
.homes {
  background-image: url(./assets/image/nav/homes.png);
}

p {
  margin: 0;
  padding: 0;
}
.in_path {
  position: fixed;
  top: 40px;
  z-index: 99;
  width: 100%;
  font-size: 12px;
  line-height: 30px;
  padding-left: 10px;
  background: #EAF2FF;
}

.in_path_exchange {
  position: fixed;
  top: 40px;
  z-index: 99;
  width: 100%;
  font-size: 12px;
  line-height: 30px;
  padding-left: 10px;
  background: #EAF2FF;
}

.in_path_advert {
  position: fixed;
  top: 40px;
  z-index: 99;
  width: 100%;
  font-size: 12px;
  line-height: 30px;
  padding-left: 10px;
  background: #EAF2FF;
}

.coni_search {
  position: absolute;
  right: 310px;
  top: 10px;
  border: none;
  height: 30px;
  border-bottom: 1px solid #666;
  outline:none;
  padding-left: 6px;
  font-size: 14px;
}
.coni_search_botton {
  position: absolute;
  right: 230px;
  top: 16px;
}
.coni_status {
  position: absolute;
  right: 528px;
  top: 10px;
}

.el-transfer-panel {
    width: 500px;
}
.el-pagination {
  text-align: center;
}
.el-table td, .el-table th {
  padding: 2px 0;
}
.el-transfer-panel__body {
  height: 326px;
}
.el-transfer-panel__list.is-filterable {
  height: 276px;
}
.el-pagination {
  position: fixed;
  width: 100%;
  bottom: 0;
  margin-left: -20px;
  padding-bottom: 10px;
  z-index: 99;
  text-align: left;
  padding-left: 100px;
  background: #fff;
  box-shadow: 0px -2px 6px -1px rgba(0,0,0,0.75);
}
.el-select-dropdown el-popper {
  position: fixed;
  top: 806px !important;
}
.el-form-item {
  margin-bottom: 10px;
}
.el-dialog {
  margin-top: 10vh !important;
}
.my_Select {
  position: fixed;
  top: 70px;
  padding-left: 20px;
  z-index: 99;
  width: 100%;
  min-width: 1000px;
  min-height: 56px;
  background: #fff;
  margin-left: -20px;
  border-bottom: 2px solid rgba(0,0,0,0.1);
}
.el-table thead {
  color: #000;
  th {
    padding: 6px 0;
  }
}
.bt-color-tjd {
  background-color: #4172a5;
  border-color:#1d6ab9;
}
.el-input--suffix .el-input__inner {
  height: 35px;
}
/*滚动条显示样式*/
::-webkit-scrollbar-thumb{
   background-color:#bbb;
   height:50px;
   outline-offset:-2px;
   outline:2px solid #fff;
   border: 2px solid #fff;
}
/*滚动条大小*/
::-webkit-scrollbar{
   width:2px;
   height:10px;
}
/*滚动框背景样式*/
::-webkit-scrollbar-track-piece{
   background-color:#fff;
}
.el-table__fixed::before, .el-table__fixed-right::before{
  background-color: transparent;
}
.el-menu-vertical-demo{
  background-color: #f1f4fa;
  font-size: 14px;

}
.el-submenu__title{
  color: #6F849A;
}
.el-menu-item-group__title{
  padding: 0;
}
.el-submenu__title * {
    margin-right: 10px;
}
</style>
